<template>
	<view class="page cabinet-give">
		<!-- 商品分类 -->
		<view class="list-box">
			<view v-if="goodsList.length>0" class="list">
				<template v-for="(goods, g) in goodsList">

					<view class="select-item" v-if="goods.give_state == 0">
						<image v-if="goods.checked" @click="handleSelect(g)" src="@/static/cabinet/icon-radio.png"
							class="radio-checked"></image>
						<view v-else @click="handleSelect(g)" class="radio"></view>

						<view @click="viewPage(goods.id)" class="item" :key="g">
							<view style="display: flex;justify-content: space-between;">
								<u-image :src="goods.product_image" width="160" height="160" border-radius="16"
									mode="widthFix"></u-image>
								<view class="info-box">
									<view class="name">{{goods.product_name}}</view>
									
									<!-- <view class="tips-box">
										<text class="tips">还可被赠送{{goods.give_number_surplus}}次</text>
									</view> -->
									
								</view>
							</view>
							<view class="price">
								<text class="label market">参考价</text>
								<text class="unit market">¥ </text>
								<text class="money market">{{goods.product_price}}</text>
								<text class="label blind" v-if="goods.source==1">拆盒价</text>
								<text class="label blind" v-else>购买价格</text>
								<text class="unit blind">¥ </text>
								<text class="money blind">{{goods.blind_box_price}}</text>
							</view>
						</view>
					</view>


				</template>
			</view>
			<view v-else class="empty-box">
				<u-empty mode="list"></u-empty>
			</view>
		</view>
		<!-- <view @click="viewReceive()" style="font-size: 36rpx;text-align: center;line-height: 80rpx;">到接收赠送</view> -->

		<!-- 相关操作 -->
		<view v-if="!showConfirm" class="action-wrap">
			<view class="blank-block"></view>
			<view class="action-box" v-if="type == 1">
				<view @click="handleGive()" class="button">已选{{selectCount}}件, 确定赠送</view>
			</view>
			<view class="action-box" v-if="type == 2">
				<view @click="handleReceive()" class="button">已选{{selectCount}}件, 确定回收</view>
			</view>
			<!-- <view class="action-box" v-if="type == 3">
				<view @click="handleSend()" class="button">已选{{selectCount}}件, 确定发货</view>
			</view> -->
		</view>
		<view class="action-back" v-if="showConfirm || showReceive"
			@click="()=>{showConfirm = false , showReceive = false}"></view>
		<view v-if="showConfirm" class="action-wrap confirm">
			<view class="blank-block"></view>

			<view class="action-box">
				<view class="title">
					<view>赠送消耗玉石</view>
					<view><text>{{yushi}}</text>玉石</view>
				</view>

				<view class="guild-box">
					<view class="header">商品赠送须知</view>

				<!-- 	<view class="flow">
						<view class="item">
							<image src="@/static/cabinet/icon-guild-arrow.png" class="arrow"></image>
							<image src="@/static/cabinet/icon-step1.png" class="icon"></image>
							<view class="step">Step.1</view>
							<view class="tips">选择好友想要的商品</view>
						</view>
						<view class="item">
							<image src="@/static/cabinet/icon-guild-arrow.png" class="arrow"></image>
							<image src="@/static/cabinet/icon-step2.png" class="icon"></image>
							<view class="step">Step.1</view>
							<view class="tips">点击赠送</view>
						</view>
						<view class="item">
							<image src="@/static/cabinet/icon-step3.png" class="icon"></image>
							<view class="step">Step.1</view>
							<view class="tips">选择好友完成赠送</view>
						</view>
					</view> -->

					<view class="rules">
						<view class="text">1. 已完成赠送的商品无法撤回</view>
						<!-- <view class="text">2. 好友收到赠送的商品后无法对其使用反悔卡</view> -->
						<view class="text">2. 请妥善使用赠送功能</view>
						<view class="text" >3. 本平台不负责因赠送出现的一切问题</view>
					</view>

					<view class="agree">同意上述<text class="text">《商品赠送须知》</text></view>

				</view>

				<button open-type="share" class="button" v-if="type == 1">确认赠送</button>
				<!-- <view @click="handleConfirm()" class="button">确认赠送</view> -->
			</view>
		</view>

		<view v-if="showReceive" class="action-receive">
			<view class="receive-title">回收</view>
			<view class="receive-flex">
				<view class="flex-left">
					<image src="@/static/center/gold-coins.png" mode=""></image>
					<view>可得玉石</view>
				</view>
				<view class="flex-right">{{info.retrieve_amount}}<text>玉石</text></view>
			</view>
			<view class="receive-desc">1. 已完成回收的商品无法撤回</view>
			<view class="receive-desc">2. 回收商品按照抽盒付款金额的固定折扣回收</view>
			<view class="receive-desc">3. 请妥善使用回收功能, 本平台不负责解决因回收引起的纠纷</view>
			<view class="receive-notice">
				同意上述<text>《商品回收须知》</text>
			</view>
			<view class="receive-confirm" @click="confirmReceive">确认回收</view>
		</view>
		<u-popup v-model="showPoup" border-radius="20" mode="center" :mask-close-able="false" 
		:closeable="true" @close="closeShow" width="572" height="596">
			<view class="cash-img">
				<image src="@/static/cabinet/cash.png" mode=""></image>
			</view>
			<view class="cash-title">恭喜你获得现金红包</view>
			<view class="shareFriend">分享后您和朋友都能领取, 快去分享吧</view>
			<button open-type="share" class="sendRedBag">发红包</button>
		</u-popup>

	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from "vuex"
	export default {
		data() {
			return {
				current: 0,
				queryParams: {
					page: 1,
					limit: 10,
					state: 1
				},
				goodsList: [],
				showConfirm: false,
				type: '',
				showReceive: false,
				showPoup: false,
				info: '',
				redBag_id: '' ,//红包分享id
				
				danjia:0,
				yushi:0
			}
		},
		computed: {
			...mapGetters(['userInfo', 'config']),
			selectCount() {
				return this.goodsList.filter(item => {
					return item.checked
				}).length
			}
		},
		onShareAppMessage() {
			
			if (this.type == 1) {
				return new Promise((resolve,reject)=>{
					let order_blind_box_ids = []
					this.goodsList.forEach(item => {
						if (item.checked) {
							order_blind_box_ids.push(item.order_blind_box_id)
						}
					})
					
					this.$net.req('/order/give', {
						order_blind_box_ids
					}).then(res => {
						if (res.code == 200) {
							this.give_blind_box_id = res.data.give_blind_box_id
							let name = this.userInfo.nickName
							let title = name.slice(0, 10) + '送给你了一个盲盒'
							let path = '/pages/cabinet/receive?id=' + res.data.give_blind_box_id + '&share_user=' +
								this.userInfo.id
							
							this.showConfirm = false
							resolve({
								title: title,
								path: path,
							}) 
						}
					})
				})
				
			}
			if (this.type == 2) {
				let name = this.userInfo.nickName
				let title = name.slice(0, 10) + '送给你了一个红包'
				let path = '/pages/cabinet/cash?id=' + this.redBag_id
				
				this.showPoup = false
				return {
					title: title,
					path: path,
				}
			}


		},
		onLoad(option) {
			this.type = option.type
			if (option.type == 1) {
				this.queryParams.state = 5
				uni.setNavigationBarTitle({
					title: '选择赠送商品'
				})
			} else if (option.type == 2) {
				uni.setNavigationBarTitle({
					title: '选择回收商品'
				})
			} else {
				uni.setNavigationBarTitle({
					title: '选择发货商品'
				})
			}
		},
		onShow() {
			this.queryParams.page = 1
			this.getList()
			this.get_yushi()
		},
		onReachBottom() {
			this.getList()
		},
		methods: {
			getList() {
				this.$net.req('/order/getlists', this.queryParams).then(res => {
					if (res.code == 200) {
						console.log(res)
						res.data.list.map(item => {
							this.$set(item, 'checked', false)
						})
						if(this.queryParams.page == 1){
							this.goodsList = res.data.list
						}else if (res.data.list.length > 0) {
							this.goodsList = this.goodsList.concat(res.data.list)
						}
						if (res.data.list.length > 0) {
							++this.queryParams.page
						}
					}
				})
			},
			viewPage(id) {
				uni.navigateTo({
					url: `/pages/index/query?id=${id}`
				})
			},
			viewReceive() {
				uni.navigateTo({
					url: `/pages/cabinet/receive`
				})
			},
			get_yushi(){
				this.$net.req('/config/getConfigByKey',{key:'ded_amount'}).then(res=>{
					if(res.code==200){
						this.danjia = res.data.value
					}
				})
			},
			handleGive() {
				this.yushi = this.danjia*this.selectCount
				this.showConfirm = true
			},
			handleReceive() {
				let order_blind_box_ids = []
				this.goodsList.forEach(item => {
					if (item.checked) {
						order_blind_box_ids.push(item.order_blind_box_id)
					}
				})
				if (order_blind_box_ids.length == 0) {
					uni.showToast({
						title: '请选择要回收的盲盒',
						icon: 'none',
						mask: true
					})
					return
				}
				this.$net.req('/order/retrievePreview', {
					order_blind_box_ids
				}).then(res => {
					if (res.code == 200) {
						this.showReceive = true
						this.info = res.data
					}
				})
			},

			handleSelect(index) {
				let item = this.goodsList[index]
				this.goodsList[index].checked = !item.checked
			},

			closeShow(){
				this.queryParams.page = 1
				this.getList()
			},
			confirmReceive() {
				this.showReceive = false
				let data = {
					order_blind_box_ids: this.info.order_blind_box_ids
				}
				
				// return
				this.$net.req('/order/retrieveConfirm', data).then(res => {
					if (res.code == 200) {
						this.redBag_id = res.data.share_bonus_id
						let that = this
						uni.showToast({
							title: res.data.retrieve_amount,
							icon: 'none',
							mask: true,
							success() {
								if(that.config.recycle_present_switch==1) {
									setTimeout(() => {
										that.showPoup = true
									}, 1500)
								} else {
									setTimeout(() => {
										uni.navigateBack({
											delta: 1
										})
									}, 1500)
									
								}
							}
						})
					}
				})

			}
		},
	}
</script>

<style lang="scss" scoped>
	.page.cabinet-give {
		.list-box {
			width: 100%;
			border-radius: 20rpx;
			margin-top: 30rpx;

			.list {
				width: 100%;
				padding: 30rpx 24rpx;

				.select-item {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 24rpx;

					&:last-child {
						margin-bottom: 0;
					}

					.radio {
						width: 48rpx;
						height: 48rpx;
						border: 2rpx solid #DEDEDE;
						border-radius: 50%;
					}

					.radio-checked {
						width: 52rpx;
						height: 52rpx;
					}

					.item {
						width: 634rpx;
						height: 308rpx;
						background: #FFFFFF;
						border-radius: 20rpx;
						padding: 32rpx 20rpx;

						.info-box {
							width: 414rpx;

							.name {
								height: 72rpx;
								font-size: 28rpx;
								font-weight: bold;
								color: #101010;
								line-height: 36rpx;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-line-clamp: 2;
								-webkit-box-orient: vertical;
							}

							.date-time {
								height: 32rpx;
								font-size: 24rpx;
								color: #C3C2C1;
								line-height: 32rpx;
								margin-top: 16rpx;
							}

							.tips-box {
								margin-top: 16rpx;

								.tips {
									display: inline-block;
									height: 40rpx;
									line-height: 40rpx;
									font-size: 20rpx;
									color: #F69D56;
									background: rgba(246, 157, 86, 0.16);
									border-radius: 8rpx;
									padding: 0 12rpx;
								}

							}

							

							.btn-box {
								text-align: right;
								margin-top: 32rpx;

								.button {
									display: inline-block;
									width: 160rpx;
									height: 64rpx;
									line-height: 64rpx;
									text-align: center;
									font-size: 28rpx;
									color: #2F2E3B;
									background: #DFC791;
									border-radius: 8rpx;
								}
							}
						}
					}
					.price {
						height: 40rpx;
						line-height: 40rpx;
						margin-top: 36rpx;
						text-align: right;
					
						.label {
							font-size: 24rpx;
							color: #C3C2C1;
					
							&.blind {
								color: #DFC791;
								margin-left: 20rpx;
							}
						}
					
						.unit {
							color: #2E2B2B;
							font-size: 24rpx;
					
							&.blind {
								color: #DFC791;
							}
						}
					
						.money {
							font-weight: bold;
							color: #2E2B2B;
							font-size: 32rpx;
					
							&.blind {
								color: #DFC791;
							}
						}
					}

				}


			}

			.empty-box {
				min-height: 60vh;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		.action-back {
			background-color: rgba($color: #000000, $alpha: 0.7);
			width: 100%;
			height: 100vh;
			position: fixed;
			top: 0;
			left: 0;
		}

		.action-wrap {
			.blank-block {
				width: 100%;
				height: 160rpx;
			}

			.action-box {
				width: 100%;
				height: 160rpx;
				position: fixed;
				bottom: 0;
				left: 0;
				background: #FFFFFF;
				border-radius: 32rpx 32rpx 0 0;
				box-shadow: 0 0 6rpx rgba($color: #000000, $alpha: 0.16);
				padding: 32rpx 24rpx;

				.button {
					height: 96rpx;
					line-height: 96rpx;
					text-align: center;
					font-size: 32rpx;
					font-weight: bold;
					color: #2F2E3B;
					background: #DFC791;
					// border: 2rpx solid #2F2E3B;
					border-radius: 12rpx;
				}
			}

			&.confirm {
				.blank-block {
					height: 868rpx;
				}

				.action-box {
					width: 100%;
					height: 618rpx;

					.title {
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;
						view{
							&:nth-child(1){
								font-size: 14px;
								font-family: HarmonyOS_Sans_SC;
								color: #2E2B2B;
							}
							&:nth-child(2){
								font-size: 12px;
								font-family: HarmonyOS_Sans_SC_Bold;
								color: #DFC791;
								text{
									font-size: 18px;
								}
							}
						}
						
					}

					.guild-box {
						margin-top: 48rpx;

						.header {
							height: 48rpx;
							font-size: 32rpx;
							font-weight: bold;
							color: #101010;
							line-height: 48rpx;
						}

						.flow {
							display: flex;
							align-items: center;
							margin-top: 32rpx;

							.item {
								flex: 1;
								display: flex;
								flex-direction: column;
								align-items: center;
								width: 216rpx;
								position: relative;

								.arrow {
									width: 60rpx;
									height: 30rpx;
									position: absolute;
									top: 30rpx;
									right: -30rpx;
								}

								.icon {
									width: 80rpx;
									height: 80rpx;
								}

								.step {
									height: 36rpx;
									font-size: 28rpx;
									font-weight: bold;
									color: #333333;
									line-height: 36rpx;
									margin-top: 10rpx;
								}

								.tips {
									height: 32rpx;
									font-size: 24rpx;
									color: #666666;
									line-height: 32rpx;
									margin-top: 10rpx;
								}
							}
						}

						.rules {
							padding: 32rpx 0;
							border-bottom: 2rpx solid #F0F0F0;


							.text {
								font-size: 28rpx;
								color: #666666;
								line-height: 36rpx;
								margin-bottom: 16rpx;

								&:last-child {
									margin-bottom: 0;
								}
							}
						}

						.agree {
							height: 40rpx;
							font-size: 28rpx;
							color: #2E2B2B;
							line-height: 40rpx;
							margin: 34rpx 0 48rpx;

							.text {
								color: #DFC791;
							}
						}
					}

					// .button {
					// 	margin-top: 106rpx;
					// }
				}
			}

		}

		.action-receive {
			width: 100%;
			height: 716rpx;
			background: #FFFFFF;
			border-radius: 32rpx 32rpx 0rpx 0rpx;
			position: fixed;
			padding: 0 24rpx;
			bottom: 0;
			left: 0;

			.receive-title {
				text-align: center;
				font-size: 36rpx;
				color: #101010;
				padding-top: 32rpx;
			}

			.receive-flex {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 48rpx;
				padding-bottom: 48rpx;
				border-bottom: 2rpx solid #F0F0F0;
				margin-bottom: 30rpx;

				.flex-left {
					display: flex;
					align-items: center;
					font-size: 32rpx;
					color: #101010;

					image {
						width: 46rpx;
						height: 48rpx;
						margin-right: 18rpx;
					}
				}

				.flex-right {
					color: #DFC791;
					font-size: 36rpx;

					text {
						font-size: 24rpx;
					}
				}
			}

			.receive-desc {
				font-size: 28rpx;
				font-family: HarmonyOS_Sans_SC;
				color: #666666;
				line-height: 36rpx;
				margin-bottom: 16rpx;
			}

			.receive-notice {
				margin-top: 32rpx;
				border-top: 2rpx solid #F0F0F0;
				padding-top: 34rpx;
				font-size: 28rpx;
				color: #2E2B2B;
				margin-bottom: 48rpx;

				text {
					color: #DFC791;
				}
			}

			.receive-confirm {
				width: 100%;
				height: 96rpx;
				background: #DFC791;
				border: 2rpx solid #2F2E3B;
				border-radius: 12rpx;
				text-align: center;
				line-height: 96rpx;
				color: #2E2B2B;
				font-size: 32rpx;
			}
		}

		.cash-img {
			width: 276rpx;
			height: 252rpx;
			margin: auto;
			margin-top: 48rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.cash-title {
			font-size: 32rpx;
			color: #333333;
			margin: 32rpx 0;
			text-align: center;
		}

		.shareFriend {
			font-size: 24rpx;
			font-family: HarmonyOS_Sans_SC;
			color: #999999;
			line-height: 32rpx;
			text-align: center;
		}

		.sendRedBag {
			width: 508rpx;
			height: 80rpx;
			background: #F74C43;
			border-radius: 12rpx;
			color: #FFFFFF;
			font-size: 32rpx;
			text-align: center;
			line-height: 80rpx;
			margin: 48rpx auto 32rpx;
		}
	}
</style>
